<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天打卡模式</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background-color: #4F46E5;
        }
        input:checked + .slider:before {
            transform: translateX(26px);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 顶部导航 -->
    <nav class="bg-white p-4 shadow-sm flex justify-between items-center">
        <a href="plan-detail.html" class="text-gray-600">
            <i class="fas fa-arrow-left"></i>
        </a>
        <h1 class="text-lg font-semibold">每日早起打卡</h1>
        <div class="w-6"></div>
    </nav>

    <!-- 主要内容 -->
    <div class="p-4">
        <!-- 计划信息 -->
        <div class="bg-white rounded-lg p-4 shadow-sm mb-4">
            <div class="text-center mb-3">
                <p class="text-gray-500">第3周/共12周</p>
                <div class="flex justify-center items-center mt-2">
                    <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-sm">
                        <i class="fas fa-check-circle mr-1"></i>
                        5/7天达标
                    </span>
                </div>
            </div>
            
            <!-- 打卡区域 -->
            <div class="border-t pt-4">
                <h3 class="text-sm font-medium text-gray-700 mb-3">今日是否完成</h3>
                
                <!-- 天打卡模式 -->
                <div class="flex justify-center items-center mb-6">
                    <label class="switch">
                        <input type="checkbox">
                        <span class="slider"></span>
                    </label>
                </div>
                
                <!-- 补打卡选项 -->
                <div class="flex justify-between items-center mb-4">
                    <span class="text-sm text-gray-500">补打卡日期</span>
                    <select class="border rounded-lg px-3 py-2 text-sm">
                        <option>选择日期</option>
                        <option>昨天</option>
                        <option>前天</option>
                    </select>
                </div>
                
                <p class="text-sm text-gray-500 text-center">已连续打卡 <span class="font-bold text-primary">7</span> 天</p>
            </div>
        </div>
        
        <!-- 备注输入 -->
        <div class="bg-white rounded-lg p-4 shadow-sm mb-4">
            <h3 class="text-sm font-medium text-gray-700 mb-3">记录备注</h3>
            <textarea class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary" 
                      rows="3" placeholder="记录今日特殊情况..."></textarea>
        </div>
        
        <!-- 打卡按钮 -->
        <button id="checkin-btn" class="w-full py-3 bg-green-600 text-white font-bold rounded-lg shadow-md hover:shadow-lg transition-all">
            确认打卡
        </button>
    </div>

    <script>
        document.getElementById('checkin-btn').addEventListener('click', function() {
            alert('打卡成功！');
            window.location.href = 'plan-detail.html';
        });
    </script>
</body>
</html>